<!DOCTYPE html>
<html lang="cn-Zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>候诊大厅导诊台</title>
    <style>
        * { padding: 0; margin: 0; }
        html, body { width: 100%; height: 100%; font-size: 0;}
        .wrapper { 
            width: 100%; height: 100%; 
            background-image: -webkit-gradient(radial, center center, 0, center center, 400, from(#5976c0), to(#2c4fa8));
        }
        .hospitalName {
            font-size: 2vw;
            line-height: 4vw;
            padding-left: 2vw;
            text-align: center;
            color: #fff;
            position: relative;
        }
        .hospitalName .time {
            position: absolute;
            top: 0;
            right: 2%;
            font-size: 1.6vw;
            color: #fff;
        }
        .inside {
            width: 96%;
            height: calc(100% - 5vw);
            margin: 0 auto;
        }
        .inside .block {
            width: calc(50% - 5px);
            height: calc(50% - 5px);
            margin-right: 10px;
            margin-bottom: 10px;
            display: inline-flex;
            background-color: rgba(255,255,255,.3);
            border-radius: .4vw;
        }
        .inside .block:nth-of-type(even) {
            margin-right: 0;
        }
        .inside .block .name {
            width: 50%;
            height: 100%;
            display: inline-flex;
            vertical-align: top;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            font-size: 3vw;
            color: #fff;
            border-right: 2px solid rgba(255,255,255,.6);
        }
        .inside .block .list {
            width: 50%;
            height: 100%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .inside .block .list .row {
            width: 100%;
            height: 33.33%;
            font-size: 2vw;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            border-bottom: 2px dashed rgba(255,255,255,.6);
        }
        .inside .block .list .row:last-child {
            border-bottom: none;
        }
        .inside .block .list .row:first-child {
            color: #93e16c;
        }
    </style>
    <script src="../../scprit/libs/jquery-1.12.3.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="hospitalName">
            广州医科大学附属第三医院
            <div class="time"></div>
        </div>
        <div class="inside"></div>
    </div>
</body>
<script>
    var host = 'http://132.147.200.96:8080'
    var interval = 10
    var render = new Render()

    getData()
    setInterval(getData, interval * 1000)

    /**
     * 获取当前展示的数据
     */
    function getData () {
        $.ajax({
            url: host + '/followup/queuing/hall',
            method: 'POST',
            success: function (res) {
                // 制造刷新感
                $('.inside').empty()
                setTimeout(function () {
                    render.init(res)
                }, 100) 
                // 倒计时
                var t = interval
                computeTime(t)
            },
            fail: function () {
                alert('请求数据发生错误！')
            }
        })
    }

    function computeTime(t) {
        $('.time').text('刷新倒计时: ' + t + 's')
        var timer = setTimeout(function () {
            t--
            if (t > 0) computeTime(t)
        }, 1000)
    }

    /**
     * 渲染列表
     */
    function Render(res) {}

    Render.prototype.init = function (data) {
        var result = ''
        for (var i = 0; i < data.length; i++) {
            result += this.block(data[i].name, data[i].patientList)
        }
        $('.inside').append(result)
    }

    Render.prototype.block = function (name, list) {
        return '<div class="block">'
             + '    <div class="name">'
             +          name
             + '    </div>'
             + '    <div class="list">'
             +        this.patients(list)
             + '  </div>'
             + '</div>'
    }

    Render.prototype.patients = function (list) {
        var result = ''
        if (list.length == 0) return result = '<div class="row">暂无排队</div>'

        for (var i = 0; i < 3; i++) {
            result += '<div class="row">' + (list[i] ? '（' + list[i].seq + '）' : '') + (list[i] ? list[i].patientName : '') + '</div>'
        }
        return result
    }

</script>
</html>